<template>
  <div class="dateRange">
    <!--未逾期-->
    <div v-if="overdueFlag === '0'" class="sort-box sort-box-normal">
      <div class="sort">
        <p class="color">{{ dateData.fromDate | formatDate('MM-dd-yyyy') }}</p>
        <p class="text color">{{ $t('originalDueDate') }}</p>
      </div>
      <i></i>
      <div class="sort sort-color">
        <p>{{ dateData.toDate | formatDate('MM-dd-yyyy') }}</p>
        <p class="text">{{ $t('newDueDate') }}</p>
      </div>
    </div>
    <!--逾期-->
    <div v-if="overdueFlag === '1'" class="sort-box sort-box-overdue">
      <div class="sort">
        <p>{{ dateData.fromDate | formatDate('MM-dd-yyyy') }}</p>
        <p class="text">{{ $t('startDate') }}</p>
      </div>
      <i></i>
      <div class="sort">
        <p>{{ dateData.toDate | formatDate('MM-dd-yyyy') }}</p>
        <p class="text">{{ $t('endDate') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dateRange',
    props: {
      dateData: {
        type: Object,
        default: {
          fromDate: '',
          toDate: '',
        }
      },
      overdueFlag: {
        type: String,
        default: '0'
      },
    },
    data () {
      return {
      };
    },
    methods: {
    }
  };
</script>

<style lang="scss" scoped>
  @import '~@/assets/scss/function';

  .dateRange {
    background:#F9F8F6;
    border-radius:16px;
    padding: 40px 24px;
    margin: 40px 0 0 0;
    .sort-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .sort {
        text-align: center;
        background: #FCFCFC;
        font-weight: bold;
        width:254px;
        height:152px;
        position: relative;
        color:#222222;
        font-size:28px;
        line-height:32px;
        padding: 42px 0 0 0;
        border:1px solid #E5E5E5;
        border-radius: 0 0 10px 10px;

        ::before {
          content: '';
          height:6px;
          width:260px;
          display: block;
          background: $mainColor;
          position: absolute;
          top:-1px;
          left:-6px;
          border-radius:6px;
        }
        .text {
          font-size: 24px;
          line-height:28px;
          margin: 12px 0 0 0;
        }
        //.color {
        //  color: transparentize($primary, 0.7);
        //}
      }
      .sort-color {
        //opacity: 1;
        //background:#fefaff;
        ::before {
          background: $mainColor;
        }
      }
    }

    i {
      display: block;
      background: url('~@/assets/imgs/extension/icon-change.svg') no-repeat center center;
      background-size: 36px 35px;
      width:36px;
      height:36px;
    }
    .sort-box-normal {
      .sort:first-child{
        opacity: .3;
        color:$mainColor;
      }
    }
    .sort-box-overdue {
      /*i {
        display: block;
        width:32px;
        height:6px;
        background:#4D5675;
      }*/
      .sort {
        .text {
          //color:#999999;
        }
      }
    }
  }
</style>
